<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于layui的notice通知控件</title>
    <link rel="stylesheet" href="https://layui.hcwl520.com.cn/layui/css/layui.css">
    <link rel="stylesheet" href="./../dist/notice.css">
</head>

<body>
    <div class="layui-container">



        <div class="layui-card">
            <div class="layui-card-header">

                1.此控件是基于layui的notice通知控件，可用于美化消息通知
                2.控件支持响应式
            </div>
            <div class="layui-card-body">

                <hr class="layui-bg-blue">
                <blockquote class="layui-elem-quote layui-quote-nm">API</blockquote>
                <button class="layui-btn" id="create1">生成notice</button>
                <pre class="layui-code">
                //使用说明
                layui.use(['notice'], function () {
                    var notice = layui.notice; // 允许别名 toastr
                        
                        // 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
                        notice.options = {
                            closeButton:true,//显示关闭按钮
                            debug:false,//启用debug
                            positionClass:"toast-top-right",//弹出的位置,
                            showDuration:"300",//显示的时间
                            hideDuration:"1000",//消失的时间
                            timeOut:"2000",//停留的时间
                            extendedTimeOut:"1000",//控制时间
                            showEasing:"swing",//显示时的动画缓冲方式
                            hideEasing:"linear",//消失时的动画缓冲方式
                            iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
                            onclick: null, // 点击关闭回调
                        };


                        notice.warning("成功");
                        notice.info("提示信息：毛都没有...");
                        notice.error("大佬，我咋知道怎么肥四！");
                        notice.success("大佬，我咋知道怎么肥四！");
                });
                </pre>
                <br>
                <hr class="layui-bg-blue">

                <button class="layui-btn" id="closeAll">移除全部</button>
<pre class="layui-code">
// 关闭全部
notice.closeAll();
</pre>
            </div>
        </div>
        <br>
    </div>
</body>
<script src="https://layui.hcwl520.com.cn/layui/layui.js"></script>
<script>
    layui.config({
        base: './../dist/'
    }).extend({
        notice: 'notice'
    });

    //layui模块的定义
    layui.use(['notice', 'jquery', 'layer'], function () {
        var notice = layui.notice;
        var layer = layui.layer;
        var $ = layui.jquery;

         // 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
         notice.options = {
            closeButton:true,//显示关闭按钮
            debug:false,//启用debug
            positionClass:"toast-top-right",//弹出的位置,
            showDuration:"300",//显示的时间
            hideDuration:"1000",//消失的时间
            timeOut:"2000",//停留的时间
            extendedTimeOut:"1000",//控制时间
            showEasing:"swing",//显示时的动画缓冲方式
            hideEasing:"linear",//消失时的动画缓冲方式
            iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
            onclick: null, // 点击关闭回调
        };


        notice.warning("成功");
        notice.info("提示信息：毛都没有...");
        notice.error("大佬，我咋知道怎么肥四！");
        notice.success("大佬，我咋知道怎么肥四！");


        let notice01;
        $("#create1").click(function () {
            let options = {
                closeButton:true,//显示关闭按钮
                debug:false,//启用debug
                positionClass:"toast-top-center",//弹出的位置,
                showDuration:"300",//显示的时间
                hideDuration:"1000",//消失的时间
                timeOut:"0",//停留的时间,0则不自动关闭
                extendedTimeOut:"1000",//控制时间
                showEasing:"swing",//显示时的动画缓冲方式
                hideEasing:"linear",//消失时的动画缓冲方式
                iconClass: 'layui-icon layui-icon-praise', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名,需要完整加上 layui-icon/icon iconfont
                onclick: null, // 点击关闭回调
                }
            notice01 = notice.success("大佬，我咋知道怎么肥四！","我是标题",options);
        });


        $("#closeAll").click(function () {
            layer.msg('移除生成的notice通知');
            notice.clear(notice01);
        });


        window.setTimeout(function () {
       
        }, 3500);

    });
</script>

</html>